import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { apiInit } from '@/services'
export default function useSearchHeader(emits: any) {
	const router = useRouter()
	const isSearch = ref(false)
	const searchVal: any = ref('')
	const curComponent = ref('AppList')
	const jumpTo = (path: string) => {
		curComponent.value = path
		emits('changeComponent', path)
		if (['AppList', 'TaskList'].includes(curComponent.value)) {
			searchVal.value = ''
		}
	}

	const clearSearhVal = () => {
		searchVal.value = ''
	}
	const switchLanguage = () => {
		router.push({ path: '/language_select' })
	}
	onMounted(() => {
		window.addEventListener('touchmove', event => {
			event.target === (document.getElementById('search-input') as any) ||
				(document.getElementById('search-input') as any).blur()
		})
	})
	let timer: any
	watch(
		() => searchVal.value,
		() => {
			// 防抖搜索
			clearInterval(timer)
			timer = setTimeout(() => {
				emits('search', searchVal.value)
			}, 500)
		}
	)
	const search = () => {
		emits('search', searchVal.value)
	}

	return {
		isSearch,
		searchVal,
		jumpTo,
		curComponent,
		switchLanguage,
		search,
		clearSearhVal,
	}
}
